<template>
  <div class="_wz_cent_main _wz_learningGardenSee">
    <div class="_wz_learningGardenSee_conent">
      <div class="_wz_learningGardenSee_title">{{ selectData.newsTitle }}</div>
      <div class="_wz_learningGardenSee_date">作者：{{ selectData.newsAuthor }}</div>
    </div>
    <div style="width: 100%;clear: both;margin-bottom: 20px;line-height: 30px;">
      <div v-html="selectData.newsContent" style="width: 100%;overflow: auto;"></div>
    </div>
    <div v-if="!!selectData.newsHtmlUrl" style="width: 100%;clear: both;margin-bottom: 20px;line-height: 30px;float: left;">
      <label style="width: 80px;float: left;">附件:</label>
      <div style="float: left;width: calc(100% - 80px);">
        <Button type="primary" style="margin-left: 10px;" @click="multipartFileDataOpen">查看文件</Button>
      </div>
    </div>

    <Drawer v-model="modal" title="附件查看" width="700" @on-close="materialData = {}" :draggable="true">
      <materialIframe v-if="modal" :materialData="materialData"></materialIframe>
    </Drawer>

    <div style="clear: both;"></div>
  </div>
</template>
<script>
import materialIframe from '../../view/educate/public/materialIframe.vue'
export default {
  props: ['selectData'],//接收来自父组件的数据
  components: {
    materialIframe,//文档
  },
  data() {
    return {
      //查看素材
      modal: false,//弹出层状态
      materialData: {},//查看课件全部数据
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

  },
  methods: {//执行的方法
    multipartFileDataOpen(){
      let that = this
      let rooturl = this.bannerURL
      that.materialData.htmlUrl = rooturl + that.selectData.newsHtmlUrl//文件路径
      that.materialData.mp3Url = ''//mp3路径
      that.modal = true
      // window.open(that.multipartFileData.name)
    },

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_learningGardenSee {
  padding:  10px;
  background: #fff;
  ._wz_learningGardenSee_conent {
    background-color: #f8f8f8;
    height: 100px;
    margin-bottom: 20px;

    ._wz_learningGardenSee_title {
      text-align: center;
      font-size: 22px;
      color: #1b4292;
      padding-top: 25px;
    }

    ._wz_learningGardenSee_date {
      text-align: center;
      font-size: 14px;
      color: #666666;
    }
  }
}
</style>
